<template>
  <div class="wrapper">
    <el-row :gutter="8">
      <el-col :span="10">
        <span class="left">{{number}}</span>
      </el-col>
      <el-col :span="14" class="right">
        <h5>{{detail}}</h5>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'PageCounterUpPart',
  props: {
    number: {
      request: true,
      type: String
    },
    detail: {
      request: true,
      type: String
    }
  }
}
</script>

<style lang="scss" scoped>

  .wrapper{
    width: 100%;
    padding: 8px 32px;
    user-select: none;

    .left{
      width: 70px;
      height: 70px;
      font-weight: 700;
      color: #f1f1f1;
      line-height: 1;
      margin-bottom: 0;
      display: inline-block;
      font-size: 60px;
      font-family: 'Roboto Condensed', sans-serif;
    }

    .right{
      text-align: left;
      padding: 10px 0;
    }

    .right h5{
      display: block;
      font-weight: 700;
      margin-left: 8px;
      margin-bottom: 0;
      line-height: 1.4;
      text-transform: uppercase;
      font-size: 16px;
    }

  }

</style>
